<template>
  <div class="app">
    <el-breadcrumb  separator-class="el-icon-arrow-right" :separator="$route.path" >
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/viewtestpaper' }">测试任务</el-breadcrumb-item>
  <el-breadcrumb-item>批阅试卷</el-breadcrumb-item>
</el-breadcrumb>
    <el-card class="box-card" shadow="always" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <table class="headtable" cellspacing="0" cellpadding="0" border="1">
          <tr>
            <td class="headleft">
              <span class="el-tag el-tag--info el-tag--light">待批阅</span>
            </td>
            <td>
              <button
                v-for="(item,index) in studentTest"
                v-show="!item.hasView"
                @click="getTestPaper(item)"
                :key="index"
                type="button"
                class="el-button el-button--info el-button--small is-round"
              >
                <span>{{item.stuName}}</span>
              </button>
            </td>
          </tr>
          <tr>
            <td class="headleft">
              <span class="el-tag el-tag--success el-tag--light">已批阅</span>
            </td>
            <td>
              <button
                v-for="(item,index) in studentTest"
                v-show="item.hasView"
                @click="getTestPaper(item)"
                :key="index"
                type="button"
                class="el-button el-button--success el-button--small is-round"
              >
                <span>{{item.stuName}}</span>
              </button>
            </td>
          </tr>
        </table>
      </div>
      <div class="text item" v-show="testPaper">
        <table cellspacing="0" cellpadding="0" border="1" class="tab">
          <caption class="title">{{testPaper.tpTitle}}</caption>
          <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>交卷</th>
            <th>选择题得分</th>
            <th>填空题得分</th>
            <th>问答题得分</th>
            <th>成绩</th>
          </tr>
          <tr class="tr-center">
            <td>{{testPaper.stuName}}</td>
            <td>{{testPaper.className}}</td>
            <td>{{testPaper.testSubmitTime}}</td>
            <td>{{testScore}}</td>
            <td>{{testGap}}</td>
            <td>{{testEssay}}</td>
            <td>{{testScore+testGap+testEssay}}</td>
          </tr>
        </table>
        <!-- 选择题 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>{{title[0]+testScore}})</span>
          </div>
          <div class="text item">
            <div class="el-card__body">
              <dl v-for="(item,index) in testScoreList" :key="index">
                <dt>
                  <label>{{index+1}}、</label>
                  <span>{{item.questionTitle}}</span>
                  <span>（{{item.testPaperScore}}分）</span>
                </dt>
                <dd>
                  <ol type="A" class="question">
                    <li v-for="(items,indexs) in item.choseQuestions.questions" :key="indexs">
                      {{items.cqOption}}
                      <i
                        v-if="items.cqIsRight"
                        class="el-icon-success"
                        style="color: rgb(0, 150, 136);"
                      ></i>
                    </li>
                  </ol>
                </dd>
                <dd style="margin-left: 24px;">
                  <span class="el-tag el-tag--info el-tag--small el-tag--light">
                    我的答案【<span
                      v-for="(items,indexs) in item.choseQuestions.myChoose"
                      :key="indexs"
                    >{{String.fromCharCode(65+item.choseQuestions.questions.findIndex(itemx=>itemx.cqId==items))}}</span>】
                  </span>&nbsp;
                  <span class="el-tag el-tag--danger el-tag--small el-tag--light">得分</span>&nbsp;
                  <div class="el-badge mark">
                    <sup class="el-badge__content el-badge__content--undefined">{{item.score}}</sup>
                  </div>
                </dd>
                <div class="el-divider el-divider--horizontal"></div>
              </dl>
            </div>
          </div>
        </el-card>
        <!-- 填空题 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>{{title[1]+testGap}})</span>
          </div>
          <div class="text item">
            <dl v-for="(item,index) in gapList" :key="index">
              <dt>
                <label>{{index+1}}、</label>
                <span
                  v-for="(items,indexs) in item.questionTitle.split('▁')"
                  :key="indexs"
                  v-html="items+(item.fillQuestion.questions.length>indexs?`<input readonly  class='tk' value='${item.fillQuestion.questions[indexs].fqAnswer}'/>${item.fillQuestion.questions[indexs].socre}分`:'')"
                ></span>
              </dt>
              <dd>
                <ol class="question" style="list-style: none; margin-left: -16px;">
                  <li>
                    <span class="el-tag el-tag--warning el-tag--light">学生答案</span>
                  </li>
                  <li v-for="(items,indexs) in item.fillQuestion.myFill" :key="indexs">
                    <span>空{{indexs+1}}</span>
                    <input type="text" readonly="readonly" :value="items.fillAnswer" class="tk" />
                    <span class="el-tag el-tag--danger el-tag--small el-tag--light">得分</span>&nbsp;
                    <el-input-number
                      v-model="items.fillScore"
                      size="small"
                      controls-position="right"
                      :min="0"
                      :max="item.fillQuestion.questions[indexs].socre"
                    ></el-input-number>
                  </li>
                </ol>
              </dd>
            </dl>
          </div>
        </el-card>
        <!-- 问答题 -->
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>{{title[2]+testEssay}})</span>
          </div>
          <div class="text item">
            <dl v-for="(item,index) in essayList" :key="index">
              <dt>
                <label>{{index+1}}、</label>
                <span>{{item.questionTitle}}</span>
                <span>（{{item.testPaperScore}}分）</span>
              </dt>
              <dd style="margin-left: 23px; padding: 15px 0px;">
                <div role="alert" class="el-alert el-alert--info is-light">
                  <div class="el-alert__content">
                    <span class="el-alert__title is-bold">学生答案</span>
                    <p class="el-alert__description">{{item.myAnswer}}</p>
                    <i class="el-alert__closebtn el-icon-close" style="display: none;"></i>
                  </div>
                </div>
              </dd>
              <dd style="margin-left: 23px;">
                <span class="el-tag el-tag--danger el-tag--small el-tag--light">得分</span>&nbsp;
                <div class="el-input-number el-input-number--mini is-controls-right">
                  <span role="button" class="el-input-number__decrease is-disabled">
                    <i class="el-icon-arrow-down"></i>
                  </span>
                  <span role="button" class="el-input-number__increase is-disabled">
                    <i class="el-icon-arrow-up"></i>
                  </span>
                  <el-input-number
                    v-model="item.score"
                    size="small"
                    controls-position="right"
                    :min="0"
                    :max="item.testPaperScore"
                  ></el-input-number>
                </div>
              </dd>
              <dd style="margin-left: 23px; padding: 10px 0px;">
                <div role="alert" class="el-alert el-alert--info is-light">
                  <div class="el-alert__content">
                    <span class="el-alert__title is-bold">参考答案</span>
                    <div class="el-alert__description">
                      <div>{{item.answer}}</div>
                    </div>
                    <i class="el-alert__closebtn el-icon-close" style="display: none;"></i>
                  </div>
                </div>
              </dd>
            </dl>
          </div>
        </el-card>
        <div style="padding: 20px; text-align: center;">
          <span data-v-6eef612e class="el-tag el-tag--info el-tag--light">
            学生成绩
            <div class="el-badge mark">
              <sup
                class="el-badge__content el-badge__content--undefined"
              >{{testScore+testGap+testEssay}}</sup>
            </div>分
          </span>&nbsp;
          <button type="button" class="el-button el-button--primary" @click="savePaper">
            <span>保存阅卷</span>
          </button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      tableData: [],
      studentTest: [], //学生信息
      testPaper: "", //学生考试试卷信息
      testScoreList: [], //选择试卷题目
      gapList: [], //填空试卷题目
      essayList: [], //问答试卷题目
      title: [], //题目标题
      testPapers:"", //原始学生考试试卷信息
    };
  },
  created() {
    this.getStudentTest(); //获取学生信息
  },
  methods: {
    getStudentTest() {
      //获取学生信息
      let that = this;
      that.$get("/api/TestResult/GetStudentTest", {
          //获取学生信息
            taskId: that.$route.query.taskId
        })
        .then(response => {
          that.studentTest = response.data;
        })
        .catch(error => {
          console.log(error);
          that.$message.error("服务器内边错误！");
        });
    },
    getTestPaper(item) {
      //获取学生试卷信息
      let that = this;
      that.$get("/api/TestResult/GetStudentTestPaper", {
            testUid: item.testUid
        })
        .then(response => {
          that.testPapers=response.data;//原始学生试卷信息
          that.testPaper = JSON.parse(JSON.stringify(response.data));//当前学生试卷信息
          that.testScoreList = that.testPaper.questions.filter(
            item => item.questionTypeId == 1
          ); //选择试卷题目
          that.gapList = that.testPaper.questions.filter(
            item => item.questionTypeId == 2
          ); //填空试卷题目
          that.essayList = that.testPaper.questions.filter(
            item => item.questionTypeId == 3
          ); //问答试卷题目
          let score = that.testScoreList.reduce((sum, item) => {
            return sum + item.testPaperScore;
          }, 0); //选择题总分数
          let gap = that.gapList.reduce((sum, item) => {
            return sum + item.testPaperScore;
          }, 0); //填空题总分数
          let essay = that.essayList.reduce((sum, item) => {
            return sum + item.testPaperScore;
          }, 0); //填空题总分数
          that.title.push(
            //题目标题，选择题
            "选择题（本大题共" +
              that.testScoreList.length +
              "道，共" +
              score +
              "分，得分"
          );
          that.title.push(
            //题目标题，填空题
            "填空题（本大题共" +
              that.gapList.length +
              "道，共" +
              gap +
              "分，得分"
          );
          that.title.push(
            //题目标题，问答题
            "问答题（本大题共" +
              that.essayList.length +
              "道，共" +
              essay +
              "分，得分"
          );
        })
        .catch(error => {
          console.log(error);
          that.$message.error("服务器内边错误！");
        });
    },
    savePaper() {
      //保存试卷
      let that = this;
      if(JSON.stringify(that.testPaper) !=JSON.stringify(that.testPapers)){//对比原始试卷与当前试卷
          let gapList = that.gapList.map(item => {
        //筛选填空题
        return {
          id: item.id,
          score: item.score,
          fillOption: item.fillQuestion.myFill.map(item => {
            return {
              id: item.id,
              fillScore: item.fillScore
            };
          })
        };
      });
      let essayList = that.essayList.map(item => {
        //筛选问答题
        return {
          id: item.id,
          score: item.score
        };
      });

        that.$post(
          "/api/TestResult/SetTestPaperScore?userUid=" + that.userUid,
          {
            id: that.testPaper.id,
            studentAnswer: gapList.concat(essayList),
            testScore: that.testScore + that.testGap + that.testEssay
          }
        )
        .then(response => {
          that.$message.success(response.data.message);
        })
        .catch(error => {
          console.log(error);
          that.$message.error("服务器内边错误！");
        });
      }else{
         that.$message.info("数据没有变化！");
      }
    }
  },
  computed: {
    ...mapState(['userUid']),
    testScore() {
      //选择题得分数
      return this.testScoreList.reduce((sum, item) => {
        return sum + parseInt(item.score);
      }, 0);
    },
    testGap() {
      //填空题得分数
      return this.gapList.reduce((sum, item) => {
        return (
          sum +
          item.fillQuestion.myFill.reduce((sums, items) => {
            return sums + parseInt(items.fillScore);
          }, 0)
        );
      }, 0);
    },
    testEssay() {
      //问答题得分数
      return this.essayList.reduce((sum, item) => {
        return sum + parseInt(item.score);
      }, 0);
    }
  }
};
</script>

<style scoped lang="less">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.headtable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e4e7ed;
  td {
    padding: 10px;
  }
  .headleft {
    width: 100px;
    text-align: center;
  }
}
.tab {
  width: 100%;
  border-color: #e4e7ed;
  .title {
    padding: 20px;
    font-weight: 700;
    font-size: 18px;
    color: #2196f3;
  }
  th,
  td {
    padding: 10px;
    text-align: center;
  }
}
/deep/.tk {
  min-width: 300px;
  text-align: center;
  border: none;
  outline: none;
  border-bottom: 1px solid #555;
}
</style>
